<template>
    
    <div class="im-iq-topTable">
      <!--table列表-->
    <el-table :data="tableData" style="width: 100%" height="450" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="50"> </el-table-column>
        <el-table-column  prop="itemCode" label="图号"  width="200"> </el-table-column>
        <el-table-column  prop="consoleName" label="操作位" width="100" > </el-table-column>
        <!-- <el-table-column  prop="workbinCode" label="分配缓存箱"  width="280"> </el-table-column> -->
        <el-table-column  prop="deliveryQty" label="移交数量"  width="180"> </el-table-column>
        <el-table-column  prop="bePutIntoQty" label="待入库数量"  width="180"> </el-table-column>
        <el-table-column  prop="startLotNo" label="架次"  width="180"> </el-table-column>
        <el-table-column  prop="mProductNumber" label="型号" width="180" > </el-table-column>
        <el-table-column  prop="qualityCode" label="质量编号/件号" width="180"> </el-table-column>
        <el-table-column  prop="barcode" label="条码" width="150" > </el-table-column>
        <el-table-column  prop="receiveDate" label="接收时间" width="180"  > </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="showRow(scope.$index, tableData)"
                type="text"
                size="small">
                查看所在缓存箱
                </el-button>
            </template>
        </el-table-column>
      
    </el-table>
    <!--分页-->
    <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>

    <!--查看物料所在箱子列表-->
    <el-drawer
    title="物料所在缓存箱列表"
        :visible.sync="drawer.drawer"
        :direction="drawer.direction">
            <el-table :data="drawer.data" style="width: 100%">
                <el-table-column  prop="workbinCode" label="缓存箱"> </el-table-column>
                <el-table-column  prop="itemQty" label="数量" > </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>

<script>
import request from "@/utils/request.js";
export default {
    data() {
      return {
        tableData:[],
        page:{
            total:0,
            // 每页数据个数
            rows: 20,
            // 当前页数
            page:1
        },
        queryParam:{},
        drawer:{
                drawer: false,
                direction:"rtl",
                data:[],
                queryParam:{}
        }
      }
    },
    //方法
    methods: {
        // 每页个数改变
        handleSizeChange(val){
            this.page.rows = val;
            this.$options.methods.query.bind(this)();//执行查询
        },
        // 页数改变
        handleCurrentChange(val) {
            this.page.page = val;
            this.$options.methods.query.bind(this)();//执行查询
        },
        tableRowClassName({row, rowIndex}) {
            //row.itemQty
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
            return 'success-row';
            }
            return '';
        },
        //查询表格数据
        query(){
            console.log("执行查询");
            var that = this;
            //需要补全
            request.post("/ReceivedDeliveryPlan/searchDeliveryReceived",
            {"pageParameter":this.page,"searchParams":this.queryParam}).then((res)=>{
                console.log("res",res);
                that.tableData = res.data.responseBody.result; //赋值表格
                that.page.total= res.data.responseBody.pageParameter.totalCount//重新赋值分页
            });
        },
        showRow(index,data){//显示缓存箱
            console.log("index",index);
            console.log("data",data[index]);
            this.drawer.queryParam = data[index];
            this.drawer.drawer = true;
            this.$options.methods.searchItemPallect.bind(this)();
        },
        searchItemPallect(para){
            console.log("para",para);
            request.post("/ReceivedDeliveryPlan/searchReceDetail",this.drawer.queryParam).then((res)=>{
                console.log("缓存箱",res);
                this.drawer.data = res.data;
            });
        }
    },
    //监听,界面初始化执行下面方法
    mounted(){
        //接收查询界面查询参数
        this.$bus.$on("receiveQueryParam",(queryParam)=>{
            console.log("queryParam",queryParam);
            this.queryParam = queryParam;
            this.$options.methods.query.bind(this)();//执行查询
        });
        //进入界面执行
        this.$options.methods.query.bind(this)();//执行查询
    }
  }


</script>
